<template>
  <view class="page">
    <!-- 头部背景 -->
    <view class="head-bg">
      <view class="head-user">
        <view class="user"> </view>
        <view class="exchange" @click="onConsumeRecord">
          <text>消费明细</text>
          <text class="iconfont icon-more"></text>
        </view>
      </view>
      <view class="wallet-balance">
        <view class="wallet">
          <text class="number">￥{{ info.balance }}</text>
          <text
            ><text
              class="iconfont icon-qianbao"
              style="margin-right: 20rpx"
            ></text
            >当前余额</text
          >
        </view>
      </view>
      <view class="bg">
        <image src="/static/integral_bg1.png" mode=""></image>
      </view>
    </view>
    <!-- 钱包充值 -->
    <view class="wallet-recharge">
      <view class="recharge-title">
        <text>钱包充值</text>
      </view>
      <view class="recharge-list">
        <view
          class="list"
          v-for="(item, index) in info.wallet_activity"
          :class="{ action: selectItem.id === item.id }"
          :key="index"
          @click="onSelectRecharge(item)"
        >
          <view class="price">
            <text>{{ item.recharge * 1 }}元</text>
          </view>
          <view class="give">
            <text>送{{ item.gift * 1 }}元</text>
          </view>
        </view>
      </view>
    </view>
    <view class="recharge-btn">
      <view class="btn">立即充值 ￥{{selectItem.recharge}}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      info: {},
      selectItem: {},
    };
  },
  onLoad(options) {
    this.loadData();
  },
  methods: {
    /**
     * 消费明细点击
     */
    onConsumeRecord() {
      uni.navigateTo({
        url: "/pages/wallet/wallet_record",
      });
    }, 
    onSelectRecharge(item) {
      this.selectItem = item
    },
    async loadData() {
      const { data } = await this.$http.user.myBalance();
      this.info = data;
      this.selectItem = data.wallet_activity[0]
    },
  },
};
</script>

<style scoped lang="scss">
.page {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}

.head-bg {
  position: relative;
  width: 100%;
  height: 400rpx;
  background: linear-gradient($base, $change-clor);
  .head-user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4%;
    height: 100rpx;
    .user {
      display: flex;
      align-items: center;
      image {
        width: 70rpx;
        height: 70rpx;
        border-radius: 100%;
      }
      text {
        font-size: 28rpx;
        color: #ffffff;
        margin-left: 20rpx;
      }
    }
    .exchange {
      display: flex;
      align-items: center;
      text {
        font-size: 28rpx;
        color: #ffffff;
      }
    }
  }
  .wallet-balance {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 200rpx;
    .wallet {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text {
        font-size: 30rpx;
        color: #ffffff;
      }
      .number {
        font-size: 60rpx;
        margin-top: 10rpx;
        // font-weight: bold;
      }
    }
  }
  .bg {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 40rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
}

/* 钱包充值 */
.wallet-recharge {
  width: 100%;
  background-color: #ffffff;
  .recharge-title {
    display: flex;
    align-items: center;
    padding: 0 4%;
    height: 100rpx;
    text {
      font-size: 30rpx;
      font-weight: bold;
      color: #222222;
    }
  }
  .recharge-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 4% 100rpx;
    .list {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 48%;
      height: 200rpx;
      background-color: #ffffff;
      border: 2rpx solid #eeeeee;
      border-radius: 10rpx;
      margin-bottom: 20rpx;
      .price {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        text {
          font-size: 32rpx;
          font-weight: bold;
          color: #555555;
        }
      }
      .give {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin-top: 10rpx;
        text {
          font-size: 26rpx;
          color: #959595;
        }
      }
    }
    .action {
      background-color: $rgba-02;
      border: 2rpx solid $base;
      .price {
        text {
          color: $base;
        }
      }
      .give {
        text {
          color: $base;
        }
      }
    }
  }
}

/* 充值按钮 */
.recharge-btn {
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100rpx;
  background-color: #ffffff;
  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    height: 70rpx;
    color: #ffffff;
    font-size: 28rpx;
    background-color: $base;
    border-radius: 70rpx;
    box-shadow: 0 10rpx 10rpx $base;
  }
}
</style>
